<template>
  <main class="num">
    <div class="value" :style="{fontSize:pxToVw(valueSize),lineHeight:pxToVw(valueSize),color}">
      {{ value || 0 }}
      <span class="unit" :style="{fontSize:pxToVw(unitSize),lineHeight:pxToVw(unitSize)}">
        {{ unit }}
      </span>
    </div>
    <div class="title" :style="{fontSize:pxToVw(titleSize),lineHeight:pxToVw(titleSize)}">
      {{ title }}
    </div>
  </main>
</template>

<script lang="js">
import {pxToVw} from "@/utils/transform"

export default {
  props: {
    value: {
      type: String,
      default: ""
    },
    unit: {
      type: String,
      default: ""
    },
    title: {
      type: String,
      default: ""
    },
    valueSize: {
      type: Number,
      default: 36,
    },
    unitSize: {
      type: Number,
      default: 14
    },
    titleSize: {
      type: Number,
      default: 14
    },
    color: {
      type: String,
      default: "#4B82FB"
    }
  },
  data() {
    return {
      pxToVw
    }
  }
}
</script>

<style scoped lang="stylus">
.value {
  font-weight 600
  display flex
  align-items flex-end

  .unit {
    color #484D78
    font-weight normal
  }
}

.title {
  padding-top 5px
}
</style>
